<template>
  <el-row @keyup.13="handleSubmit"
          class="login-bg"
          type="flex"
          justify="center"
          align="middle"
          v-auto-height>
    <div class="login_box">
      <div class="login_title"
           v-html="text_container"></div>
      <div class="login_input01">
        <el-form class="register"
                 ref="form"
                 :model="form"
                 label-width="0px">
          <mk-form-item prop="comobile"
                        mk-label="手机号码"
                        required>
            <el-input class="yhm"
                      placeholder="手机号"
                      v-model="form.comobile"
                      v-focus>
              <i slot="prefix"
                 class="el-icon-erp-yonghuming"></i>
            </el-input>
          </mk-form-item>
          <mk-form-item prop="code"
                        mk-label="图形验证码"
                        required>
            <el-col :span="12">
              <el-input class="mm"
                        placeholder="图形验证码"
                        v-model="form.code" />
            </el-col>
            <el-col :span="12">
              <span class="yzm_span"><img v-cursor
                     :src="ui.code_src"
                     @click="change_code"
                     ref="codeImg" /></span>
            </el-col>
          </mk-form-item>

          <mk-form-item prop="comobileCode"
                        mk-label="短信验证码"
                        required>
            <el-col :span="12">
              <el-input class="yzm"
                        placeholder="短信验证码"
                        v-model="form.comobileCode" />
            </el-col>
            <el-col :span="12">
              <mk-timer-btn @callback="getValidCode"
                            @countfinish="countFinish"
                            :disabled="ui.validCodeLoading"></mk-timer-btn>
            </el-col>
          </mk-form-item>
          <mk-form-item prop="password"
                        mk-label="新密码"
                        :mk-le-length="20"
                        :mk-ge-length="6"
                        required>
            <el-input class="mm"
                      type="password"
                      placeholder="请输入新密码"
                      v-model="form.password">
              <i slot="prefix"
                 class="el-icon-erp-mima"></i></el-input>
          </mk-form-item>
          <mk-form-item prop="confirmPassword"
                        mk-label="请确认新密码"
                        :mk-eq="getPwd"
                        required>
            <el-row>
              <el-input class="mm"
                        type="password"
                        placeholder="请确认新密码"
                        v-model="form.confirmPassword">
                <i slot="prefix"
                   class="el-icon-erp-mima"></i>
              </el-input>
            </el-row>
          </mk-form-item>

        </el-form>
        <el-button :loading="ui.submitLoading"
                   type="primary"
                   @click="handleSubmit"
                   class="denglu">确认重置</el-button>
        <p class="tabnormal"
           @click="normal_login">已有账号去登录</p>
      </div>
    </div>
  </el-row>
</template>
<script>
import { mapMutations } from 'vuex'
import loginMix from './login-mix'

export default {
  mixins: [loginMix],
  data () {
    return {
      form: {
        comobile: '',
        comobileCode: '',
        password: '',
        confirmPassword: '',
        code: ''
      },
      ui: {
        loging: false, // 登录
        submitLoading: false, // 注册LOGDING
        code_src: '',
        formLabelWidth: '150px',
        isCharge: false,
        validCodeLoading: false
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.codeIndex = this.$cache.guid()
      this.ui.code_src = `${this.basePath}/validateCode.jpegx?index=${
        this.codeIndex
      }&timestamp=${+new Date()}`
      this.UNBIND_ALL()
      let fn = this.$refs.form.validate
      let nodejs = false
      this.validate = this.$promise({ fn, nodejs })
    })
  },
  methods: {
    ...mapMutations(['BIND_USER', 'BIND_MENUS', 'UNBIND_ALL', 'BIND_CONFIG']),
    normal_login () {
      this.$router.replace('/login')
    },
    change_code (event) {
      event.target.src = `${this.basePath}/validateCode.jpegx?index=${
        this.codeIndex
      }&timestamp=${+new Date()}`
    },
    countFinish () {
      this.ui.validCodeLoading = false
    },
    async getValidCode () {
      if (
        !this.form.code ||
        this.form.code.length !== 4 ||
        (!this.form.comobile || !this.$pattern.phone.test(this.form.comobile))
      ) {
        this.$refs.form.validateField('comobile')
        this.$refs.form.validateField('code')
        return
      }
      let valiState = await this.$get('/validateImgCode.json', {
        codeImg: this.form.code
      })
      if (valiState.result) {
        this.ui.validCodeLoading = true
        await this.$get('/validateCodeReg.sms', {
          phone: this.form.comobile
        })
      }
    },
    getPwd () {
      return this.form.password
    },
    async handleSubmit () {
      if (!this.validate) {
        let fn = this.$refs.registerForm.validate
        let nodejs = false
        this.validate = this.$promise({ fn, nodejs })
      }
      if ((await this.validate()) === false) return
      this.ui.submitLoading = true
      try {
        let data
        let valiState = await this.$get('/validateImgCode.json', {
          codeImg: this.form.code
        })
        if (valiState.result) {
          data = await this.$put('/frontend/cpCompany/forgetPsd.json', {
            cpCompany: this.form
          })

          if (data) {
            this.$message({
              type: 'success',
              message: '重置成功！'
            })
            this.$router.replace('/login')
          }
        }
      } catch (e) {
        this.$message.error('重置失败！')
        this.$refs.codeImg.src = `${this.basePath}/validateCode.jpegx?index=${
          this.codeIndex
        }&timestamp=${+new Date()}`
      } finally {
        this.ui.submitLoading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login-bg {
  background: url(~assets/images/loginbg.png) no-repeat;
  background-size: 100% 100%;
  .login_box {
    width: 396px;
    height: auto;
    background: #fff;
    box-shadow: 0px 1px 15px 10px #eee;
    border-radius: 4px;
    background-size: 100% 100%;
    padding-bottom: 20px;
    .login_title {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      color: rgba(146, 158, 170, 1);
      text-align: center;
      background: rgba(245, 248, 248, 1);
      margin-bottom: 28px;
    }
    .login_input01 {
      width: 245px;
      margin: 0 auto;
      .el-form {
        .mk-form-item {
          /deep/ .el-form-item__content {
            position: relative;
            .login_icon {
              position: absolute;
              bottom: -0.1rem;
              left: 5px;
              z-index: 9;
              color: rgba(146, 158, 170, 1);
            }
            .yzm {
              width: 50%;
              .yzm_span {
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            /deep/.el-form-item__error {
              top: 102%;
            }
            .el-input {
              height: 35px;
              margin-top: 13px;
              .el-input__inner {
                height: 35px;
                padding-left: 31px;
              }
            }
          }
          &:nth-child(2) {
            /deep/ .el-form-item__content {
              .el-input {
                float: left;
                width: 50%;
                line-height: 31px;
                .el-input__inner {
                  margin-top: 0px;
                  padding-left: 10px;
                }
              }
              span {
                float: left;
                width: 47%;
                height: 34px;
                margin-top: 13px;
                margin-left: 6px;
              }
            }
          }
          &:nth-child(3) {
            /deep/ .el-form-item__content {
              .el-input {
                float: left;
                width: 50%;
                margin-top: 13px;
                line-height: 31px;
                .el-input__inner {
                  padding-left: 10px;
                }
              }
              button {
                float: left;
                width: 47%;
                height: 35px;
                text-align: center;
                margin-top: 13px;
                line-height: 32px;
                margin-left: 6px;
                border: 1px solid #00a3ef;
                border-radius: 5px;
                color: #00a3ef;
                background: #fff;
                cursor: pointer;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .el-button {
        width: 100%;
        margin-top: 17px;
      }
      .tabnormal {
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: url(~assets/images/line.png) no-repeat;
        background-size: 100% 100%;
        font-size: 16px;
        color: rgba(146, 158, 170, 1);
        margin: 0px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
